<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.text" placeholder="内容" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select
        v-model="listQuery.gtPushType"
        placeholder="推送类型"
        style="width: 150px;"
        class="filter-item"
        clearable
        @keyup.enter.native="handleFilter"
      >
        <!-- <el-option style="width: auto" label="个推" :value="1">个推</el-option> -->
        <el-option style="width: auto" label="渠道推" :value="2">渠道推</el-option>
        <el-option style="width: auto" label="全推" :value="3">全推</el-option>
      </el-select>
      <el-select
        v-model="listQuery.sendFlag"
        placeholder="推送状态"
        clearable
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="失败" :value="0">失败</el-option>
        <el-option style="width: auto" label="成功" :value="1">成功</el-option>
        <el-option style="width: auto" label="待推" :value="2">待推</el-option>
      </el-select>
      <el-select
        v-model="listQuery.scheduleFlag"
        placeholder="定时推送"
        clearable
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="是" :value="1">是</el-option>
        <el-option style="width: auto" label="否" :value="0">否</el-option>
      </el-select>
      <p>
        推送时间：<el-date-picker
          v-model="times"
          class="filter-item"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 250px;"
          clearable
          type="daterange"
          value-format="yyyy-MM-dd"
        />
      </p>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="success" @click="handleCreate">
        新增
      </el-button>
      <el-button v-waves class="filter-item" type="warning" @click="handleExport">
        导出
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="编号" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="通知标题" class-name="status-col" width="100">
        <template slot-scope="{row}">
          {{ row.title }}
        </template>
      </el-table-column>
      <el-table-column label="发送内容" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.text }}</span>
        </template>
      </el-table-column>
      <el-table-column label="推送类型" min-width="110" align="center">
        <template slot-scope="{row}">
          <span v-if="row.gtPushType === 1">个推</span>
          <span v-if="row.gtPushType === 2">批量推</span>
          <span v-if="row.gtPushType === 3">全推</span>
        </template>
      </el-table-column>
      <el-table-column label="跳转链接" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.setUrl }}</span>
        </template>
      </el-table-column>
      <el-table-column label="跳转类型" min-width="120" align="center">
        <template slot-scope="{row}">
          <span v-if="row.code === '1'">跳APP首页</span>
          <span v-if="row.code === '2'">跳转网页</span>
        </template>
      </el-table-column>
      <el-table-column label="推送状态" min-width="110" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.sendFlag === 0" type="danger">失败</el-tag>
          <el-tag v-if="row.sendFlag === 1" type="success">成功</el-tag>
          <el-tag v-if="row.sendFlag === 2" type="warn">待推</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="定时推送" min-width="200" align="center">
        <template slot-scope="{row}">
          <span v-if="row.scheduleTime">{{ row.scheduleTime }}</span>
          <span v-if="!row.scheduleTime">立即</span>
        </template>
      </el-table-column>
      <el-table-column label="实际推送时间" min-width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.gmtDateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成功下发数" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.sentTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到达数" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.feedbackTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column label="展示数" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.displayTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column label="点击数" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.clickTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column label="点击率" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.clickRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <!-- <el-button type="primary" size="mini" @click="handleUpdate(row)">
            查看详情
          </el-button> -->
          <el-button type="primary" size="mini" @click="handleUpdateData(row)">
            修改
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getGtPushList"
    />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="pushs" label-position="left" label-width="90px" style="width: 400px; margin-left:50px;">

        <el-input v-model="pushs.id" type="hidden" />

        <el-form-item label="推送标题">
          <el-input v-model="pushs.title" />
        </el-form-item>
        <el-form-item label="推送内容">
          <textarea v-model="pushs.text" style="width :300px;height:200px;border: 1px solid #dcdfe6;border-radius: 5px;" />
        </el-form-item>
        <el-form-item label="推送类型">
          <el-select v-model="pushs.gtPushType" clearable placeholder="推送类型" style="width: 150px;" class="filter-item">
            <!-- <el-option style="width: auto" label="个推" :value="1">个推</el-option> -->
            <el-option style="width: auto" label="批量推" :value="2">批量推</el-option>
            <el-option style="width: auto" label="全推" :value="3">全推</el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="pushs.gtPushType===2" label="渠道">
          <el-select
            v-model="pushs.channelId"
            filterable
            :filter-method="dataFilter"
            placeholder="选择渠道"
            style="width: 150px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          >
            <el-option v-for="item in options" :key="item.channelId" :label="item.channel_name" :value="item.channelId" />
          </el-select>
        </el-form-item>
        <el-form-item label="跳转路径">
          <el-input v-model="pushs.setUrl" />
        </el-form-item>
        <el-form-item label="跳转类型">
          <el-select v-model="pushs.code" clearable placeholder="跳转类型" style="width: 150px;" class="filter-item" readonly="readonly">
            <el-option style="width: auto" label="跳APP首页" :value="1">跳APP首页</el-option>
            <el-option style="width: auto" label="跳转网页" :value="2">跳转网页</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="定时推送">
          <el-switch v-model="clockStatus" active-color="#13ce66" inactive-color="#ff4949" />
          <el-date-picker
            v-if="clockStatus"
            v-model="clockTimes"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看" :visible.sync="updialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="pushs" label-position="left" label-width="90px" style="width: 400px; margin-left:50px;">

        <el-input v-model="pushs.id" type="hidden" />

        <p>
          <span style="margin-right:20px;margin-top:20px">通知标题</span>
          <span>
            {{ pushs.title }}
          </span>
        </p>
        <p>
          <span style="margin-right:20px;margin-top:20px">详情内容</span>
          <span>
            {{ pushs.text }}
          </span>
        </p>
        <p>
          <span style="margin-right:20px;margin-top:20px">发送状态</span>
          <span>
            <span v-if="pushs.sendFlag === 0">失败</span>
            <span v-if="pushs.sendFlag === 1">成功</span>
          </span>
        </p>
        <p>
          <span style="margin-right:20px;margin-top:20px">推送时间</span>
          <span>
            {{ pushs.createTime }}
          </span>
        </p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updialogFormVisible = false">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGtPushList, updateGtPush, exportGtPushList, removeGtPush, saveGtPush, selectGtPushById } from '@/api/sys'
import { getChannelIdAndNick } from '@/api/user'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'Push',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      clockStatus: false,
      clockTimes: undefined,
      tableData: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        sysLabel: ''
      },
      pushs: {},
      times: [],
      dialogFormVisible: false,
      dialogFormVisibleClock: false,
      updialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '查看',
        create: '新增'
      },
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        username: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      optionsCopy: [],
      options: [],
      listLoading: false
    }
  },
  created() {
    this.getGtPushList(this.listQuery)
    this.getChannelIdAndNick()
  },
  methods: {
    handleExport() {
      exportGtPushList(this.listQuery).then(res => {
        if (res.data.code === 200) {
          window.location.href = res.data.data
        } else {
          this.$notify({
            title: '错误',
            message: '导出失败，请联系后台技术人员',
            type: 'fail',
            duration: 2000
          })
        }
      })
    },
    dataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.options = this.optionsCopy.filter((item) => {
          if (!!~item.channel_name.indexOf(val) || !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery)
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element)
          this.options.push(element)
        }
      })
    },
    // 获取用户列表
    async getGtPushList(listQuery) {
      const res = await getGtPushList(this.listQuery, this.listQuery.sysLabel)

      this.tableData = res.data.data.records
      this.total = res.data.data.total
    },
    handleFilter() {
      this.listQuery.current = 1
      if (this.times == null) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else if (this.times.length === 0) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else {
        this.listQuery.endTime = this.times[1]
        this.listQuery.startTime = this.times[0]
      }
      this.getGtPushList(this.listQuery)
    },
    handleDelete(row) {
      this.$confirm('删除提示！', '确认删除吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        removeGtPush({ id: row.id }).then((res) => {
          if (res.data.code === 200) {
            this.getGtPushList()
          }
        })
      })
    },
    cancel() {
      this.dialogFormVisible = false
      this.getGtPushList()
    },
    handleCreate() {
      this.pushs = {}
      this.clockTimes = null
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdateData(row) {
      this.pushs = row
      if (this.pushs.scheduleTime !== null && this.pushs.scheduleTime !== '') {
        this.clockStatus = true
        // this.clockTimes = '2222-11-11 12:12:12'
        this.clockTimes = this.pushs.scheduleTime
      }
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    createData() {
      if (!this.clockStatus) {
        this.pushs.scheduleTime = null
      } else {
        this.pushs.scheduleTime = this.clockTimes
      }
      saveGtPush(this.pushs).then(() => {
        this.dialogFormVisible = false
        this.$notify({
          title: 'Success',
          message: 'save Successfully',
          type: 'success',
          duration: 2000
        })
        this.getGtPushList()
      })
    },
    updateData() {
      if (!this.clockStatus) {
        this.pushs.scheduleTime = null
      } else {
        this.pushs.scheduleTime = this.clockTimes
      }
      updateGtPush(this.pushs).then(() => {
        this.dialogFormVisible = false
        this.$notify({
          title: 'Success',
          message: 'save Successfully',
          type: 'success',
          duration: 2000
        })
        this.getGtPushList()
      })
    },
    async handleUpdate(row) {
      this.pushs.id = row.id
      selectGtPushById(this.pushs).then((res) => {
        this.pushs = res.data.data
      })
      this.dialogStatus = 'update'
      this.updialogFormVisible = true
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style scoped>

</style>
